<template>
	<view class="container">
		<!-- tab 组件-->
		<view class="search">
			<!-- 搜索框 -->
			<view class="search-input-wrapper">
				<input type="text" icon="search" v-model="skuname" placeholder="搜索商品" placeholder-class="placeholder" />
				<button class="search-btn" @click="getList()">搜索</button>
			</view>
			<!-- <image class="seach-img" src="../../static/manghe/sort.png" mode="" @click="toggleSortOrder()"></image> -->
		</view>
		<scroll-view class="tab-bar" scroll-x="true">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ 'active': currentTab === index }" @click="switchTab(index)">
				{{ tab.title }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</scroll-view>

		<!-- 根据Tab选择显示的内容 -->
		<view class="tab-content">
			<scroll-view class="twonav" scroll-x="true">
				<view class="two-content"  v-for="(item,index) in selectedCategory" :key="index" @click="getDetails(item.uuid)">
					<view class="twoImg">
						<image :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="two-name">{{item.title}}</view>
				</view>
			</scroll-view>
			<view class="threeNav">
				<view class="three-con">
					<view class="three-bigbox" v-for="(third,tIndex) in thirdList" :key="tIndex" @click="toDetail(third)">
						<view class="three-left">
							<image :src="third.pic" mode="aspectFill"></image>
						</view>
						<view class="three-right">
							<p>{{third.name}}</p>
							<view class="detail">
								超高几丰拍到xXX
							</view>
							<view class="price">
								{{third.price}}晶石
							</view>
						</view>
					</view>
					<NoData v-if="showNoData"></NoData>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0, // 默认选中第一个Tab
				tabs: [],
				selectedCategory: [], //二级分类
				thirdList:[], // 三级数据
				showNoData:false, // 是否显示无数据
				skuname:"",
			};
		},
		created() {
			this.getList()
		},
		methods: {
			// 切换Tab
			switchTab(index) {
				this.currentTab = index;
				this.showNoData = false;
				this.selectedCategory = this.tabs[index].subCategories;
				if(this.selectedCategory.length > 0){
					let uuId = this.selectedCategory[0].uuid
					this.getDetails(uuId)
				}else{
					this.thirdList =[]
					this.showNoData = true
				}
			},
			//获取一级二级分类数据
			getList() {
				let data = {
					key:this.skuname
				}
				this.$http("/categories", "get", data).then(res => {
					if (res.code == '200') {
						this.tabs = res.data.list
						if (res.data.list.length > 0) {
							this.switchTab(0);
						}else{
							this.showNoData = true
						}
					} else {
						this.tabs = []
					}
				})
			},
			// 获取三级数据
			getDetails(uuid){
				
				this.$http(`/categories/${uuid}`, "get", {}).then(res => {
					if(res.code == '200'){
						this.thirdList = res.data.list
						if(res.data.list.length > 0){
							this.showNoData = false
						}else{
							this.showNoData = true
						}
						
					}else{
						this.showNoData = true
					}
				})	
			},
			// 跳转详情页
			toDetail (item) {
				uni.navigateTo({
					url: '/pages/productDetail/index?uuid=' + item.uuid
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.tab-bar {
		/* width: 100%; */
		/* display: flex;
		justify-content: space-around;
		align-items: center; */
		background: url("../../static/topback.png");
		background-size: cover;
		color: #fff;
		/* position: fixed;
		top: 0; */
		z-index: 999;
		white-space: nowrap;
	}
	.tab-content{
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.tab-item {
		position: relative;
		padding: 20rpx 20rpx;
		cursor: pointer;
		display: inline-block;
	}

	.tab-item.active {
		font-weight: bold;
	}

	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 4rpx;
		background-color: #fff;
	}

	.twonav {
		width: 100%;
		height: 400rpx;
		background: url("../../static/topback.png");
		background-size: cover;
		display: flex;
		flex-wrap: nowrap;
		/* justify-content: space-evenly; */
		/* position: fixed; */
		/* top: 80rpx; */
		/* 横向滚动 */
		overflow-x: auto;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.threeNav {
		width: 100%;
		flex: 1;
		/* height: 75vh; */
		background-color: #090918;
		/* position: fixed;
		top: 480rpx; */
		overflow: hidden;
	}

	.three-con {
		width: 100%;
		/* height: 69vh; */
		overflow: hidden;
		overflow-y: auto;
		height: 100%;
		padding: 40rpx;
		box-sizing: border-box;
	}

	.two-content {
		width: 30%;
		height: 20vh;
		background: url("../../static/twoback.png") no-repeat;
		background-size: cover;
		border-radius: 10rpx;
		padding-top: 0.8vh;
		padding-bottom: 0.8vh;
		margin: 40rpx 0;
		box-sizing: border-box;
		flex: 0 0 auto;
		/* 不伸缩，固定宽度 */
		margin-left: 20rpx;
		/* 右侧间距 */
		overflow: hidden;
	}

	.twoImg {
		width: 95%;
		height: 13vh;
		/* background: url("../../static/Group 427319077.png") no-repeat; */
		/* background-size: cover; */
		border-radius: 10rpx;
	}

	.twoImg image {
		width: 100%;
		height: 11vh;
	}

	.two-name {
		width: 100%;
		height: 4vh;
		font-size: 25rpx;
		color: white;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 控制显示的行数为 2 行 */
		-webkit-box-orient: vertical;
	}

	.three-bigbox {
		/* width: 90%; */
		height: 300rpx;
		background: url("../../static/bottomback.png") no-repeat;
		background-size: contain;
		border-radius: 10rpx;
		box-sizing: border-box;
		display: flex;
		margin-bottom: 32rpx;
		padding: 20rpx;
		display: flex;
	}

	.three-left {
		width: 210rpx;
		height: 210rpx;
		overflow: hidden;
		/* margin-left: 20rpx; */
	}

	.three-left image {
		width: 210rpx;
		height: 210rpx;
		/* height: 13vh; */
	}

	.three-right {
		flex: 1;
		color: #fff;
		margin-left: 40rpx;
		white-space: 2rpx;
	}

	.three-right p {
		width: 100%;
		height: 50rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.detail {
		width: 60%;
		height: 2.5vh;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 20rpx;
		font-size: 24rpx;
		text-align: center;
		line-height: 2.5vh;
		letter-spacing: 3rpx;
		margin: 20rpx 0rpx;
		color: #91d7db;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.price {
		width: 90%;
		text-align: right;
		margin-top: 60rpx;
	}
	.search {
		// width: 95%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #333;
		padding: 0 32rpx;
	
		.search-input-wrapper {
			height: 80rpx;
			margin: 30rpx 0;
			flex: 1;
			background-color: #fff;
			padding: 0 30rpx;
			font-weight: 100;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 15rpx;
	
			.icon-search {
				margin-right: 10rpx;
				color: #000;
				z-index: 999;
			}
	
			input {
				background-color: transparent;
				padding: 0;
				height: 90%;
				line-height: 70rpx;
				color: #000;
			}
	
			.search-btn {
				width: 130rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 32rpx;
				position: absolute;
				right: 5%;
				color: #fff;
				background: rgb(108, 67, 255);
			}
		}
	
	
	}
</style>
